<template>
  <div class="slides-show">
    <el-carousel trigger="click">
      <el-carousel-item v-if="slidesShowList.length == 0" class="text-align-center">
        <i class="el-icon-chat-square fz-50"></i>
        <h4>暂无轮播</h4>
        <h3>请到管理端添加</h3>
      </el-carousel-item>
      <el-carousel-item v-else v-for="(item, index) in slidesShowList" :key="index">
        <img width="100%" :src="item.imgUrl" alt="" @click="seeArticle(item)">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slidesShowList:[]
    }
  },
  created() {
    this.getSlideShowList()
  },
  methods: {
    async getSlideShowList() {
      let res = await this.api.get('/getSlidesShowList')
      if(res.code == 0) {
        this.slidesShowList = res.data
      }
    },
    seeArticle(item) {
      this.$router.push(`/articleDetail/${item.articleId}`)
    }
  },
}
</script>

<style lang="scss">
.slides-show {
  width: 100%;
  max-width: 900px;
  height: 300px;
}
</style>